<template>
    <div>
        <transition-group name="move">
            <div v-for="(img, i) in imgLists" class="imgWrap" :key="img.src">
                <img :src="img.src" alt="">
                <span class="imgAction">
                    <span class="previcw" @click="handlePictureCardPreview(img.src)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span class="delete" @click="deleteImg(i)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </transition-group>
        <div class="inputWrap">
            <i class="el-icon-plus"></i>
            <input type="file" class="upload_input" @change="uploadImg($event)">
        </div>
        <slot></slot> 
        <el-dialog :visible.sync="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    export default {
        props:[''],
        data(){
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                uploadFlag : false,
                imgIndex : 0,    //图片排列到几
                imgLists: [],
                subimgList:[], // 表单提交所需数据
            }
        },
        mounted(){
        },
        methods: {
            uploadImg(e){
                const file = e.target.files[0];
                const isImage = file.type.includes("image");
                if (!isImage) {
                    this.$message.error("上传文件类型必须是图片!");
                    return false;
                }
                const isLt500 = file.size / 1024 / 1024 <= 0.5;   //判断图片是否小于500KB
                if (!isLt500) {
                    this.$message.error('上传图片大小不能超过500KB!');
                    return false;
                }
                if(this.imgLists.length>=5){
                    this.$message.error('最多可上传5张图片！');
                    return false;
                }
                this.uploadFlag = true;
                let dataImg = new FormData();//创建from对象
                dataImg.append('file', file);
                dataImg.append('imgType', "refund");
                let config = {
                    headers: { 'Content-Type': 'multipart/form-data','Authorization':this.$cookie.get('Authorization')}
                };
                const instance = this.$axios.create({
                    withCredentials: true
                })
                instance.post('/admin/image/uploadImg.json', dataImg, config).then(res => {
                    if (res.data.code == "SUCCESS") {
                        this.subimgList.push({url:res.data.url,fileName:file.name})
                        this.imgLists.push({src:res.data.url})
                        this.$message.success('上传成功');
                        //上传成功之后清掉数据防止下次传相同图片的时候不触发change事件 
                        e.target.value = '';
                    } else {
                        this.$message.error(res.data.message);
                        return false
                    }
                }).catch(err => {
                    this.$message.error('服务器异常，请重试');
                    return false
                })
            },
            handlePictureCardPreview(src) {
                this.dialogImageUrl = src;
                this.dialogVisible = true;
            },
            deleteImg(index){
                this.imgLists.splice(index, 1);
                this.subimgList.splice(index, 1);
            }
        }
    }

</script>


<style scoped>
    .inputWrap,.imgWrap{
        display: inline-block;
        width: 150px;
        height: 150px;
        line-height: 150px;
        position: relative;
        margin-right: 10px;
        border: 1px dashed #ddd;
        text-align: center;
        border-radius: 10px;
        overflow: hidden;
        vertical-align: middle;
    }
    .inputWrap:hover{
        border-color: #409eff;
    }
    .imgWrap{
        line-height: 1.8;
        border: 1px solid #c0ccda;
    }
    .imgWrap img{
        width: 100%;
        height: 100%;
        border-radius: 10px;
        vertical-align: middle;
    }
    .imgAction{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0,0,0,.5);
        color: #fff;
        text-align: center;
        cursor: default;
        transition: opacity .3s;
    }
    .imgWrap:hover .imgAction{
        opacity: 1;
    }
    .imgAction span{
        cursor: pointer;
        line-height: 150px;
    }
    .imgAction .delete{
        margin-left: 10px;
    }
    .el-icon-plus{
        font-size: 28px;
        color: #8c939d;
    }
    .upload_input{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        /* filter: alpha(opacity:0); */
        z-index: 10;
    }
    .upload_info{
        clear: both;
        font-size: 12px;
        color: #606266;
        margin-top: 7px;
    }
    #upload_target{
        display: none;
    }
    /*动画*/
    .move-enter-active,.move-leave-active{
        transition: all .5s cubic-bezier(.55,0,.1,1);
    }
    .move-enter, .move-leave-to {
        transform: translateY(-20px);
        opacity: 0;
    }
    .move-move{
        transition: transform .5s;
    }
</style>
